<template>
  <view>
    <!-- 搜索框 -->
    <ugo-search></ugo-search>
    <!-- 轮播图 -->
    <u-swiper
      :list="swiperList"
      :height="340"
      name="image_src"
      :effect3d="true"
    ></u-swiper>
    <!-- 导航模块 -->
    <view class="nav u-flex">
      <navigator
        v-for="item in navList"
        :key="item.name"
        class="u-flex-1 u-p-30"
      >
        <u-image width="100%" mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
    </view>
    <!-- 商品楼层 -->
    <view>
      <view v-for="item1 in floorList" :key="item1.floor_title.name">
        <!-- 标题 -->
        <view>
          <u-image
            :src="item1.floor_title.image_src"
            width="100%"
            mode="widthFix"
          ></u-image>
        </view>
        <!-- 内容 -->
        <view class="floor-group-content">
          <navigator v-for="item2 in item1.product_list" :key="item2.name">
            <u-image
              width="100%"
              height="100%"
              mode="scallToFill"
              :src="item2.image_src"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图的数组
      swiperList: [],
      // 导航模块
      navList: [],
      //   商品列表
      floorList: [],
    };
  },
  onLoad() {
    this.getSwiper();
    this.getNav();
    this.getFloor();
  },
  methods: {
    // 轮播图
    async getSwiper() {
      const result = await this.$u.get("/home/swiperdata");
      this.swiperList = result.message;
    },
    // 导航模块
    async getNav() {
      const result = await this.$u.get("/home/catitems");
      this.navList = result.message;
    },
    // 商品楼层
    async getFloor() {
      const result = await this.$u.get("/home/floordata");
      this.floorList = result.message;
    },
  },
};
</script>

<style lang="scss">
.floor-group-content {
  navigator {
    float: left;
    width: 232rpx;
    height: 188rpx;
    margin-left: 15rpx;
  }

  navigator:nth-child(1) {
    height: 386rpx;
  }
  /* 后两个导航标签 */
  navigator:nth-last-child(-n + 2) {
    margin-top: 15rpx;
  }
}
</style>
